<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='保存文章',active='publish'">
<head>
    <meta charset="utf-8"/>
    <title>adfa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" th:href="@{/static/admin1/images/favicon.png}"/>
    <link th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/admin1/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/admin1/editormd/css/editormd.css}" rel="stylesheet"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>-->
<!--    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>-->
</head>
<link th:href="@{/static/admin1/plugins/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
<link th:href="@{/static/admin1/plugins/select2.dist.css/select2-bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/static/admin1/plugins/toggles/toggles.css}" rel="stylesheet"/>

<!-- editor.md -->

<style>
    #tags_tagsinput {
        background-color: #fafafa;
        border: 1px solid #eeeeee;
    }

    #tags_addTag input {
        width: 100%;
    }

    #tags_addTag {
        margin-top: -5px;
    }
</style>
<body class="fixed-left" style="margin-right: 5%;">

<div style="width: 100%;">

    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h2 class="page-title">

                            <block >
                                发布帖子
                            </block>
                        </h2>
                    </div>
                    <div class="col-md-12">
                        <form id="articleForm" role="form" novalidate="novalidate">
                            <div class="form-group col-md-6" style="padding: 0 10px 0 0;">
                                <input type="text" id="title" class="form-control" placeholder="请输入文章标题（必须）" name="title"
                                       required="required"
                                       aria-required="true"
                                       />
                            </div>

                            <div class="form-group col-md-6" style="padding: 0 0 0 10px;">
                                <select id="getTags" class="select2 form-control"
                                        data-placeholder="请选择帖子类型..">
                                    <block  id="getTags">

                                    </block>

                                </select>
                            </div>


                            <div class="form-group col-md-6" style="padding: 0 10px 0 0;">
                                <!-- 如果是作品类，那么暂时不允许使用标签 -->
                                <input name="tags"   type="text" class="form-control" placeholder="请填写简要说明"
                                       />
                            </div>
<!--                        <div  id="removeDiv">-->
<!--                         <div id="writeArticle" >-->
<!--                                <div class="zhy-editor">-->
<!--                                    <div class="zhy-editor-input">-->
<!--                                        <input id="zhy-editor-title" type="text" placeholder="输入文章标题">-->
<!--                                        <button type="button" class="publishBtn am-btn am-btn-danger">发布博客</button>-->
<!--                                    </div>-->

<!--                                <div class="zhy-editor-writing">-->

                            <div id="my-editormd" >
                                <textarea id="my-text"  name="my-text" style="display:none;" class="markdown-textarea"
                                >## 在这里输入帖子的内容...</textarea>
                                <!-- 注意：name属性的值-->
                                <textarea id="text" name="text" style="display:none;" ></textarea>
<!--                            </div>-->
<!--                                    <div class="notice-box notice-box-title">-->
<!--                                        <i class="am-icon-exclamation-circle"></i>-->
<!--                                        <span> 文章标题不能为空</span>-->
<!--                                    </div>-->
<!--                                    <div class="notice-box notice-box-content">-->
<!--                                        <i class="am-icon-exclamation-circle"></i>-->
<!--                                        <span> 文章內容不能为空</span>-->
<!--                                    </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                         </div>-->

                        </div>


                            <div class="text-left">
                                <a class="btn btn-default waves-effect waves-light"  th:href="@{/user/home}">返回资料详情</a>
                                <button type="button" id="publish" class="btn btn-primary waves-effect waves-light"
                                >
                                    发布帖子
                                </button>
                                <button type="button" class="btn btn-warning waves-effect waves-light"
                                >
                                    存为草稿
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script th:src="@{https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js}"></script>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
<script type="text/javascript">
    var editormd;
    $(function() {

        editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
            width   : "100%",
            height  : 640,
            // syncScrolling : "single",
            path    : "/static/admin1/editormd/lib/",//注意2：你的路径
            saveHTMLToTextarea : true//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            // imageUpload: true,
            // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
            // imageUploadURL: "/admin1/attach/uploadfile",
            // onload: function (obj) { //上传成功之后的回调
            // }
        });



    });



    $(function () {
        //var value =this.val();
        $.ajax({
            type: "get",
            url: '/user/getTags',  //从数据库查询返回的是个list
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            async: false,
            cache: false,
            success: function (data) {
                if (data){
                    var tags=[];
                    tags.push('<option value="" selected="selected">'+'请选择标签'+'</option>');
                    for(var i=0,len=data.data.length;i<len;i++){
                        var tag = data.data[i];
                        tags.push('<option value="'+tag.tagName+'">'+tag.tagName+'</option>')
                    }
                    $("#getTags").html(tags.join(''));

                }
            }

        })


    });




    // 发布帖子
    $('#publish').click(function () {
        var articleTitle = $("#title").val();  // 可能有坑！
        var articleTag = $("#getTags").val();
        var articleContent = $('.editormd-markdown-textarea').val();

        var converter = new showdown.Converter(); //初始化转换器
        var htmlcontent  = converter.makeHtml(articleContent); //将MarkDown转为html格式的内容
        var data = {
            "title": articleTitle,
            "tag": articleTag,
            "content": htmlcontent,
            "resutlCode":200
        }

        console.log(data);
        $.ajax({
            type: 'POST',//方法类型
            url: "/user/publish",
            data: data,
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (resutl) {
            if (resutl.status==200){
               alert ("帖子发表成功！");
                window.location.replace("/user/home");
            }else {
                alert("发表博客异常")
            }
            },
            error:function(){
            alert("发表博客异常")
        }
        })

        // // 弹出框方法
        // function msg(msg) {
        //     $('#msg').html(msg);
        //     $('#msgModal').modal({
        //         keyboard: false
        //     });
        // }
    });






</script>

<script th:src="@{/static/admin1/editormd/editormd.min.js}"></script>


</body>
</html>